<template>
  <div>
    <div style="display: flex;margin-bottom: 10px">
      <el-input
        placeholder="请输入活动名称"
        v-model="activityName"
        style="width: 200px;margin-left: 10px"
        clearable>
      </el-input>
      <el-button @click="getMyActivityList" type="primary" style="margin-left: 10px" size="medium">查询</el-button>
    </div>

    <el-table
      :data="page.records"
      border
      style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="活动详情：">
              <span>{{ props.row.activityDetail }}</span>
            </el-form-item>
            <!--            <el-form-item label="社团通知：">-->
            <!--              <span>{{ props.row.clubNotice }}</span>-->
            <!--            </el-form-item>-->
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
        fixed
        prop="id"
        label="ID"
        width="60">
      </el-table-column>
      <el-table-column
        prop="name"
        label="活动名称"
        width="120">
      </el-table-column>
      <el-table-column
        prop="clubName"
        label="所属社团"
        width="120">
      </el-table-column>
      <el-table-column
        prop="activityIntroduce"
        label="活动简介"
        width="350">
      </el-table-column>
      <!--      <el-table-column-->
      <!--        prop="activityDetail"-->
      <!--        label="活动详情"-->
      <!--        width="200">-->
      <!--      </el-table-column>-->
      <el-table-column
        prop="createUserId"
        label="活动身份"
        width="100"
      >
        <template slot-scope="scope">
          <p v-if="scope.row.createUserId==id">管理员</p>
          <p v-else>成员</p>
        </template>
      </el-table-column>
      <el-table-column
        prop="address"
        label="活动地点"
        width="120">
      </el-table-column>
      <el-table-column
        prop="object"
        label="活动对象"
        width="120">
      </el-table-column>
      <el-table-column
        prop="wechat"
        label="微信"
        width="120">
      </el-table-column>
      <el-table-column
        prop="maxPerson"
        label="参与人数"
        width="120">
      </el-table-column>
      <el-table-column
        prop="activityType"
        label="活动分类"
        width="120">
      </el-table-column>

      <el-table-column
        label="活动开始时间"
        width="120"
      >
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{getDateTime(scope.row.beginTime)}}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="活动结束时间"
        width="120"
      >
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{getDateTime(scope.row.endTime)}}</span>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      @current-change="changeActivityList"
      :page-count="page.pages"
    >
    </el-pagination>
  </div>
</template>

<script>
  import {getMyActivityPageList} from "../../../api/activity";
  import {getDateTime1} from "../../../utils/dateTimeUtil";

  export default {
    name: "MyActivity",
    data() {
      return {
        page: {
          total: 2,
          current: 1,
          records: [],
          pages: 2,
        },
        activityName: null,
        id: sessionStorage.getItem('id'),
      }
    },
    created() {
      this.getMyActivityList();
    },
    methods: {
      getMyActivityList() {
        getMyActivityPageList({
          currentPage: this.page.current,
          activityName: this.activityName,
        }).then(res => {
          this.page = res.data;
        })
      },
      changeActivityList(val) {
        console.log(val)
        this.page.current = val;
        this.getMyActivityList();
      },
      getDateTime(val) {
        return getDateTime1(val);
      }
    }
  }
</script>

<style scoped>
.demo-table-expand {
  font-size: 0;
  text-decoration: none;
  margin: 20px;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 100%;
}
</style>
